<template>
  <div class="home">
    <!-- 导航栏 -->
    <el-header>
      <div class="header-container">
        <div class="logo">
          <h1>企洺星科技</h1>
        </div>
        <el-menu :default-active="activeIndex" mode="horizontal" class="nav-menu">
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">公司介绍</el-menu-item>
          <el-menu-item index="3">业务介绍</el-menu-item>
          <el-menu-item index="4">案例展示</el-menu-item>
          <el-menu-item index="5">新闻动态</el-menu-item>
          <el-menu-item index="6">联系我们</el-menu-item>
        </el-menu>
        <div class="contact-info">
          <el-button type="primary" size="small">联系我们</el-button>
        </div>
      </div>
    </el-header>

    <!-- 轮播图 -->
    <el-carousel height="500px" indicator-position="outside" autoplay>
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <div class="carousel-item" :style="{ backgroundImage: `url(${item.image})` }">
          <div class="carousel-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
            <el-button type="primary" size="large">{{ item.buttonText }}</el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 公司简介 -->
    <section class="about-section">
      <div class="container">
        <h2 class="section-title">关于我们</h2>
        <div class="about-content">
          <div class="about-text">
            <h3>合肥企洺星网络信息科技有限公司</h3>
            <p>企洺星科技是一家专注于软件开发、网站建设、APP开发和跑腿软件解决方案的高科技企业。我们拥有一支专业的技术团队，致力于为客户提供高质量的技术服务和解决方案。</p>
            <p>自成立以来，我们始终坚持以客户为中心，以技术创新为动力，不断提升服务质量和技术水平，赢得了广大客户的信赖和支持。</p>
          </div>
          <div class="about-stats">
            <div class="stat-item">
              <div class="stat-number">5+</div>
              <div class="stat-label">年行业经验</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">100+</div>
              <div class="stat-label">成功案例</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">50+</div>
              <div class="stat-label">专业技术人员</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">98%</div>
              <div class="stat-label">客户满意度</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心业务 -->
    <section class="services-section">
      <div class="container">
        <h2 class="section-title">核心业务</h2>
        <div class="services-grid">
          <el-card class="service-card" v-for="service in services" :key="service.id">
            <div class="service-icon">
              <i :class="service.iconClass"></i>
            </div>
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
            <el-button type="default">查看详情</el-button>
          </el-card>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section class="cases-section">
      <div class="container">
        <h2 class="section-title">成功案例</h2>
        <div class="cases-grid">
          <el-card class="case-card" v-for="caseItem in cases" :key="caseItem.id">
            <img :src="caseItem.image" alt="{{ caseItem.title }}">
            <h3>{{ caseItem.title }}</h3>
            <p class="case-client">{{ caseItem.client }}</p>
            <el-button type="default">查看详情</el-button>
          </el-card>
        </div>
      </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="partners-section">
      <div class="container">
        <h2 class="section-title">合作伙伴</h2>
        <div class="partners-slider">
          <div class="partner-item" v-for="partner in partners" :key="partner.id">
            <img :src="partner.logo" alt="{{ partner.name }}">
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
      <div class="container">
        <h2 class="section-title">联系我们</h2>
        <div class="contact-content">
          <div class="contact-info">
            <div class="contact-item">
              <i class="el-icon-location"></i>
              <div>
                <h4>公司地址</h4>
                <p>安徽省合肥市高新区创新大道2800号</p>
              </div>
            </div>
            <div class="contact-item">
              <i class="el-icon-phone"></i>
              <div>
                <h4>联系电话</h4>
                <p>400-123-4567</p>
              </div>
            </div>
            <div class="contact-item">
              <i class="el-icon-message"></i>
              <div>
                <h4>电子邮箱</h4>
                <p>info@qimingxing.com</p>
              </div>
            </div>
          </div>
          <div class="contact-form">
            <el-form :model="form" label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label="咨询内容">
                <el-input v-model="form.content" type="textarea" rows="4"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <el-footer>
      <div class="footer-container">
        <div class="footer-column">
          <h3>企洺星科技</h3>
          <p>专注于为企业提供全方位的技术服务和解决方案</p>
        </div>
        <div class="footer-column">
          <h4>快速链接</h4>
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">公司介绍</a></li>
            <li><a href="#">业务介绍</a></li>
            <li><a href="#">案例展示</a></li>
            <li><a href="#">新闻动态</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h4>联系我们</h4>
          <p>地址：安徽省合肥市高新区创新大道2800号</p>
          <p>电话：400-123-4567</p>
          <p>邮箱：info@qimingxing.com</p>
        </div>
      </div>
      <div class="footer-copyright">
        <p>© 2023 合肥企洺星网络信息科技有限公司 版权所有</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      activeIndex: '1',
      form: {
        name: '',
        phone: '',
        content: ''
      },
      carouselItems: [
        {
          id: 1,
          image: 'https://via.placeholder.com/1200x500?text=企业官网建设',
          title: '专业的企业官网建设',
          description: '为您打造符合企业形象的高质量官方网站',
          buttonText: '了解更多'
        },
        {
          id: 2,
          image: 'https://via.placeholder.com/1200x500?text=软件开发服务',
          title: '定制化软件开发服务',
          description: '根据企业需求定制专属软件解决方案',
          buttonText: '咨询服务'
        },
        {
          id: 3,
          image: 'https://via.placeholder.com/1200x500?text=APP开发',
          title: '移动应用开发',
          description: '专业的APP开发团队，为您打造高品质移动应用',
          buttonText: '查看案例'
        }
      ],
      services: [
        {
          id: 1,
          title: '网站开发',
          description: '企业官网、电商网站、门户网站等各类网站开发服务',
          iconClass: 'el-icon-s-operation'
        },
        {
          id: 2,
          title: 'APP定制开发',
          description: 'iOS、Android应用开发，为企业打造专属移动应用',
          iconClass: 'el-icon-mobile'
        },
        {
          id: 3,
          title: '软件开发',
          description: '各类管理系统、业务系统、办公系统定制开发',
          iconClass: 'el-icon-laptop'
        },
        {
          id: 4,
          title: '跑腿软件解决方案',
          description: '专业的跑腿软件系统开发，满足各类配送需求',
          iconClass: 'el-icon-bicycle'
        }
      ],
      cases: [
        {
          id: 1,
          title: '某电商平台系统开发',
          client: '某知名电商企业',
          image: 'https://via.placeholder.com/400x300?text=电商平台案例'
        },
        {
          id: 2,
          title: '企业管理系统开发',
          client: '某制造企业',
          image: 'https://via.placeholder.com/400x300?text=管理系统案例'
        },
        {
          id: 3,
          title: '移动应用开发',
          client: '某互联网公司',
          image: 'https://via.placeholder.com/400x300?text=移动应用案例'
        }
      ],
      partners: [
        {
          id: 1,
          name: '合作伙伴1',
          logo: 'https://via.placeholder.com/150x80?text=合作伙伴1'
        },
        {
          id: 2,
          name: '合作伙伴2',
          logo: 'https://via.placeholder.com/150x80?text=合作伙伴2'
        },
        {
          id: 3,
          name: '合作伙伴3',
          logo: 'https://via.placeholder.com/150x80?text=合作伙伴3'
        },
        {
          id: 4,
          name: '合作伙伴4',
          logo: 'https://via.placeholder.com/150x80?text=合作伙伴4'
        },
        {
          id: 5,
          name: '合作伙伴5',
          logo: 'https://via.placeholder.com/150x80?text=合作伙伴5'
        }
      ]
    }
  },
  methods: {
    submitForm() {
      this.$message.success('表单提交成功！我们会尽快与您联系。')
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
}

.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  color: #333;
}

/* 头部样式 */
.el-header {
  height: auto !important;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.logo h1 {
  margin: 0;
  font-size: 24px;
  color: #1890ff;
}

.nav-menu {
  flex: 1;
  margin: 0 50px;
}

/* 轮播图样式 */
.el-carousel {
  width: 100%;
}

.carousel-item {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.carousel-content {
  margin-left: 100px;
  color: #fff;
}

.carousel-content h2 {
  font-size: 48px;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-content p {
  font-size: 20px;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 关于我们样式 */
.about-section {
  background-color: #f5f5f5;
}

.about-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-text {
  text-align: center;
  max-width: 800px;
  margin-bottom: 40px;
}

.about-text h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.about-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 15px;
}

.about-stats {
  display: flex;
  justify-content: space-around;
  width: 100%;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  margin: 20px;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 16px;
  color: #666;
}

/* 服务样式 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.service-card {
  text-align: center;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-icon {
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.service-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 案例样式 */
.cases-section {
  background-color: #f5f5f5;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.case-card {
  overflow: hidden;
}

.case-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s;
}

.case-card:hover img {
  transform: scale(1.05);
}

.case-card h3 {
  font-size: 18px;
  margin: 15px 0 10px 0;
  color: #333;
}

.case-client {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
}

/* 合作伙伴样式 */
.partners-slider {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 40px 0;
}

.partner-item {
  width: 150px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.partner-item img {
  max-width: 80%;
  max-height: 60%;
}

/* 联系我们样式 */
.contact-content {
  display: flex;
  justify-content: space-between;
}

.contact-info {
  width: 40%;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.contact-item i {
  font-size: 24px;
  color: #1890ff;
  margin-right: 20px;
  margin-top: 5px;
}

.contact-item h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.contact-item p {
  font-size: 16px;
  color: #666;
}

.contact-form {
  width: 55%;
  background-color: #f5f5f5;
  padding: 30px;
  border-radius: 5px;
}

/* 页脚样式 */
.el-footer {
  background-color: #333;
  color: #fff;
}

.footer-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 60px 0 30px 0;
}

.footer-column {
  width: 30%;
}

.footer-column h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #fff;
}

.footer-column h4 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
}

.footer-column p {
  font-size: 14px;
  line-height: 1.8;
  color: #999;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: #999;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-column ul li a:hover {
  color: #1890ff;
}

.footer-copyright {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #444;
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .container,
  .header-container,
  .footer-container {
    width: 90%;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  
  .carousel-content {
    margin-left: 50px;
  }
  
  .carousel-content h2 {
    font-size: 36px;
  }
  
  .carousel-content p {
    font-size: 16px;
  }
  
  .services-grid,
  .cases-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-content {
    flex-direction: column;
  }
  
  .contact-info,
  .contact-form {
    width: 100%;
    margin-bottom: 30px;
  }
  
  .footer-container {
    flex-direction: column;
  }
  
  .footer-column {
    width: 100%;
    margin-bottom: 30px;
  }
}
</style>
